<template>
  <div class="modifyPassWordBox">
    <el-card>
      <div slot="header" class="clearfix">
        <span>修改密码</span>
      </div>
      <div class="formBox">
        <el-form
          :model="formData"
          ref="form"
          :rules="rules"
          label-width="80px"
          size="small"
          status-icon
        >
          <el-form-item label="旧密码" prop="oldPassword">
            <el-input v-model="formData.oldPassword"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input v-model="formData.newPassword" type="password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="newPasswordAgain">
            <el-input
              v-model="formData.newPasswordAgain"
              type="password"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitEdit">确定</el-button>
            <el-button>重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { $_user_checkoldpwd, $_user_editpwd } from "@/api/user";
export default {
  data() {
    // 验证旧密码是否正确
    let checkOldPassword = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请输入旧密码"));
      } else {
        // 去后台数据库查询这个密码是否正确
        $_user_checkoldpwd({
          oldPwd: value,
        }).then((res) => {
          console.log(51, res);
          if (res.data.code == 201) {
            callback(res.data.msg);
          } else {
            callback();
          }
        });
      }
    };
    // 新密码验证函数
    var checkPassword = (rule, value, callback) => {
      if (value == "") {
        // 如果填入的值为空，那么提示
        callback(new Error("请输入密码"));
      } else if (!/^(?=.*[a-zA-Z])(?=.*[0-9])[A-Za-z0-9]{8,18}$/.test(value)) {
        // 密码有值，但是不符合公司的密码规则
        callback(
          new Error("密码必须由字母、数字组成，区分大小写,密码长度为8-18位")
        );
      } else {
        // 如果通过规则，那么执行回调
        if (this.formData.newPasswordAgain != "") {
          console.log("确认密码有值我才去校验是否相同");
          this.$refs.form.validateField("newPasswordAgain");
        }
        if (value == this.formData.oldPassword) {
          callback(new Error("新密码不能和旧密码相同！"));
        } else {
          callback();
        }
      }
    };
    // 确认密码验证函数
    var checkPasswordAgain = (rule, value, callback) => {
      console.log("验证确认密码和新密码是否相同");
      if (value == "") {
        callback(new Error("请输入确认密码"));
      } else if (value !== this.formData.newPassword) {
        callback(new Error("两次密码不一致"));
      } else {
        callback();
      }
    };
    return {
      formData: {
        oldPassword: "",
        newPassword: "",
        newPasswordAgain: "",
      },
      rules: {
        oldPassword: [
          {
            required: true,
            // 代表的是自定义规则验证
            validator: checkOldPassword,
            trigger: "blur",
          },
        ],
        newPassword: [
          {
            required: true,
            // 代表的是自定义规则验证
            validator: checkPassword,
            trigger: "blur",
          },
        ],
        newPasswordAgain: [
          {
            required: true,
            // 代表的是自定义规则验证
            validator: checkPasswordAgain,
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    // 修改密码提交请求
    submitEdit() {
      $_user_editpwd({
        newPwd: this.formData.newPassword,
      }).then((res) => {
        console.log(130, res);
        if (res.data.code == 0) {
          this.$message({
            type: "success",
            message: res.data.msg + ",2秒之后重新登录！",
          });

          // 密码修改成功之后，跳转到登录页面
          setTimeout(() => {
            localStorage.removeItem("token");
            this.$router.push("/login");
          }, 2000);
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
          });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.modifyPassWordBox {
  .el-input {
    width: 200px;
  }
}
</style>